import React, { useState } from 'react'
import { chepiaoApi } from "../../api/index";
import { useLoaderData } from 'react-router-dom'
import { InfiniteScroll, List } from "antd-mobile";
import Item from '../../path/liebiao/crenterem/Item'
import { useSearchParams } from 'react-router-dom';
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom';
function Index() {
    const nav=useNavigate()
    const loader = useLoaderData()
    const [list, setList] = useState(loader.hcepiao)
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const [sp]=useSearchParams()
    async function loadMore() {
        setPage(a => a + 1)
        const data = { ...Object.fromEntries(sp), page: page + 1 }
        const { data: res } = await chepiaoApi(data)
        setList([...list, ...res])
        if (res.length === 0) {
            setHasMore(false)
        }
    }
    return (
      <div>
        <NavBar onBack={()=>nav(-1)}>景区门票</NavBar>
        {list.map((item, index) => {
          return <Item key={index} {...item}></Item>;
        })}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    );
}

export default Index
export const loader = async({ request }) => {
    console.log(request)
    const url = new URL(request.url)
    const data = Object.fromEntries(url.searchParams)
    const { data: res } = await chepiaoApi(data);
    console.log(res)
    return {hcepiao:res}
}
